<template>
	<div class="nav">
		<nobr>
			<span v-for="(item, index) in navList" :key="index" @contextmenu.prevent="showSlide($event, item)">
				<el-tag :closable="item.router =='/Home' ? false : true"
					:disable-transitions="false"
					@close="closePage(item)"
					@click="skipPage(item)" type="info" size="small" :color="item.actived == true ? '#42b983' : ''"
					:style="{
						color: item.actived == true ? '#fff' : ''
					}"
					:class="{'tags': true, 'tagsActived': item.actived}">
					<i v-if="item.actived" style="width: 8px;height: 8px;border-radius: 4px;background: #fff;display: inline-block;margin: 0 3px;"></i>{{item.title}}
				</el-tag>
			</span>
		</nobr>

		<!-- 右击下拉菜单 -->
		<ul class="rightMenu" v-if="isShowRightMenu" :style="{
			top: top + 'px',
			left: left + 'px'
		}">
			<li v-for="(item, index) in rightMenuList" :key="index" @click.stop="closeMenuSlide(item)">{{item.name}}</li>
		</ul>
	</div>
</template>

<script>
	import { mapState } from "vuex";

	export default {
		name: "Nav",
		data() {
			return {
				// 右击下拉菜单
				isShowRightMenu: false,							// 根据这个判断右击下拉菜单是否显示
				top: 0,											// 菜单距离顶部的坐标
				left: 0,										// 菜单距离左侧的坐标
				currentNavInfo: {},								// 当前导航信息
				rightMenuList: [								// 菜单选项
					{
						id: 1,
						name: "关闭当前"
					}, {
						id: 2,
						name: "关闭左侧"
					}, {
						id: 3,
						name: "关闭右侧"
					}, {
						id: 4,
						name: "关闭所有"
					}
				]
			}
		},

		computed: {
			...mapState(["navList"]),
		},

		methods: {
			// 关闭 Tag 时触发的事件
			closePage(item) {
				let that = this;
				let nextNav = {};
				
				if (item.actived) {
					that.navList.forEach((j, index) => {
						if (item.router === j.router) {
							nextNav = that.navList[index - 1];
						}
					})

					that.$router.push({
						path: nextNav.router
					})
				}

				that.$store.commit("clearCache", item);//清除路由缓存
				that.$store.commit("removeTag", item);
			},

			// 路由跳转
			skipPage(item) {
				this.navList.forEach(j => {
					j.actived = false;
				})

				item.actived = true;

				if (this.$route.path !== item.router) {
					this.$router.push({
						path: item.router
					})
				}
			},

			// 鼠标右击显示菜单
			showSlide (event, item) {
				let that = this;

				if (item.router !== "/Home") {
					that.left = event.layerX + 20;
					that.top = event.layerY + 60;
					that.currentNavInfo = item;
					that.isShowRightMenu = true;
				}
			},

			// 调起关闭菜单
			closeMenuSlide (item) {
				let that = this;

				switch (item.id) {
					case 1:
						that.closeCurrentMenu();
						break;
					case 2:
						that.closeLeftMenu();
						break;
					case 3:
						that.closeRightMenu();
						break;
					case 4:
						that.closeAllMenu();
						break;
				}
			},

			// 关闭当前菜单
			closeCurrentMenu () {
				let that = this;

				// 两种情况：一、当前为选中的标签；二、当前不是选中的标签
				if (that.currentNavInfo.actived) {
					that.navList.forEach((item, index) => {
						if (that.currentNavInfo.router === item.router) {
							that.$router.push({
								path: that.navList[index - 1].router
							})
						}
					})
				}

				that.$store.commit("clearCache", that.currentNavInfo);
				that.$store.commit("removeTag", that.currentNavInfo);
				that.isShowRightMenu = false;
			},

			// 关闭左侧菜单
			closeLeftMenu () {
				let that = this;

				// 两种情况：一、当前为选中的标签；二、当前不是选中的标签(分为两种情况：当前标签的左侧有选中的标签，当前标签的左侧没有选中的标签)
				if (!that.currentNavInfo.actived) {
					// 再判断要关闭的标签中是否包含选中的标签
					// 如果存在选中的标签，那么就跳转到首页
					// 如果不存在选中的标签，那么无须任何处理
					let isFlag = false;
					let removeItemList = [];

					that.navList.forEach((item, index) => {
						if (item.router === that.currentNavInfo.router) {
							that.navList.forEach((j, i) => {
								if (i != 0 && i < index) {
									removeItemList.push(j);
								}
							})
						}
					})

					if (removeItemList.length > 0) {
						removeItemList.forEach((item, index) => {
							if (item.actived) {
								isFlag = true;
							}
						})
					}

					// 如果 isFlag 为真，证明要删除的标签中含有已选中的标签，否则不存在选中的标签
					if (isFlag) {
						isFlag = false;

						that.$router.push({
							path: "/Home"
						})
					}
				}

				that.$store.commit("removeLeftTag", that.currentNavInfo);
				that.isShowRightMenu = false;
			},

			// 关闭右侧菜单
			closeRightMenu () {
				let that = this;

				// 和删除左侧标签相反
				if (!that.currentNavInfo.actived) {
					let isFlag = false;
					let removeItemList = [];
					let l = that.navList.length;

					that.navList.forEach((item, index) => {
						if (item.router === that.currentNavInfo.router) {
							that.navList.forEach((j, i) => {
								if (i > index && i < l) {
									removeItemList.push(j);
								}
							})
						}
					})

					if (removeItemList.length > 0) {
						removeItemList.forEach((item, index) => {
							if (item.actived) {
								isFlag = true;
							}
						})
					}

					if (isFlag) {
						isFlag = false;

						that.$router.push({
							path: "/Home"
						})
					}
				}

				that.$store.commit("removeRigthTag", that.currentNavInfo);
				that.isShowRightMenu = false;
			},

			// 关闭全部菜单
			closeAllMenu () {
				let that = this;

				that.$store.commit("clearAll");
				that.$store.commit("removeAllTag");
				that.isShowRightMenu = false;
				
				that.$router.push({
					path: "/Home"
				})
			}
		},

		created () {
			let that = this;

			// 监听鼠标在菜单其他地方触发事件时，关闭菜单下拉选项
			document.addEventListener('click', (e) => {
				if (!that.$el.contains(e.target))
				that.isShowRightMenu = false;
			})
			
			
			// 判断当前路由与标签选中的路由是否相同，如果相同不做任何操作
			that.navList.forEach((item, index) => {
				if (item.actived) {
					if (item.router !== that.$route.path) {
						let obj = {
							name: that.$route.name,
							title: that.$route.meta.title,
							actived: true,
							router: that.$route.path,
							meta: {
								keepAlive: that.$route.meta.keepAlive,
							}
						}
						
						that.$store.commit("addTag", obj);
						that.$store.commit("cache", obj);// 缓存路由
					}
				}
			})
		}
	}
</script>

<style scoped>
	@import "../assets/css/common.css";
	@import "../assets/css/nav.css";
</style>
